<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<meta name="referrer" content="no-referrer">
		<script type="text/javascript" src="js/three.min.js"></script>
		<script type="text/javascript" src="js/OrbitControls.js"></script>
		<script type="text/javascript" src="js/DeviceOrientationControls.js"></script>
		<script type="text/javascript" src="js/yb-player-gesture.js"></script>
		<script type="text/javascript" src="js/yb-player-subtitle.js"></script>
		<script type="text/javascript" src="js/yb-player-danmu.js"></script>
		<script type="text/javascript" src="js/yb-player-pano.js"></script>
		<script type="text/javascript" src="js/yb-player.js"></script>
		
		<script type="text/javascript" src="js/common-slots.js"></script>
		
		<link rel="stylesheet" href="css/yb-player.css" />
		<link rel="stylesheet" href="css/yb-player-plugin.css" />
		
		<link rel="stylesheet" href="css/common-slots.css" />
		<title>本地播放器</title>
		<style>
			html, body {
				padding: 0;
				margin: 0;
				background-color: #000;
				width: 100vw;
				height: 100vh;
			}
			.yb-player {
				width: 100%;
				height: 100%;
			}
			.header_download svg {
				width: 25px;
				height: 25px;
				fill: #fff;
			}
		</style>
	</head>
	<body>
		<!-- Specify the player container -->
		<div id="yb-player" class="yb-player"></div>
		<script>
			var mp
			function setVideo (arg) {
				var params = JSON.parse(decodeURIComponent(arg))
				if ( mp ) {
					mp.unloadGestureEvent()
					mp.unloadVideo()
					mp.unloadDanmu()
					mp.unload()
				}
				mp = new YbPlayer({
					container:'#yb-player',
					src: params.src,
					title: params.title,
					autoplay: true,
					loop: true,
					height: '100%',
					controls: true,
					initialTime: params.initialTime,
					crossOrigin: 'anonymous',
					custom: {
						gesture: {
							initialVolume: params.initialVolume,
							initialLight: params.initialLight
						},
						progress: {
							rightSlots: [danmuSlot]
						},
						controls: {
							slots: [danmuSlot]
						},
						header: {
							enableThree: true
						},
						danmu: {
							fontScale: 0.7,
							fontSize: 25,
							filter: params.danmufilter
						}
					}
				})
				mp.load()
				mp.loadVideo()
				mp.loadGestureEvent()
				mp.showControls()
			}
			function postMessage (data) {
				const parent = window.parent || window.top
				parent.postMessage(data);
			}
			
			function play () {
				if ( mp && mp.video ) mp.video.play()
			}
			function pause () {
				if ( mp && mp.video ) mp.video.pause()
			}
			//消息提示
			function showToast (arg) {
				var data = JSON.parse(decodeURIComponent(arg))
				mp?.showToast(data)
			}
			
			function decimalToRgb (decimal) {
				var r = (decimal >> 16) & 255;
				var g = (decimal >> 8) & 255;
				var b = decimal & 255;
				return 'rgb(' + r + ',' + g + ',' + b + ')'
			}
		</script>
	</body>
</html>